<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<title>翻牌记忆力游戏</title>
<link href="styles/matchgame.css" rel="stylesheet">
</head>


<body>
<div id="scorediv">
<label>恭喜完成！所用步数:</label>
<label id="score">0</label>
<label>时间:</label>
<label id="timer">0</label>
</div>
<script type="text/javascript" src="scripts/game.js"></script>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="scripts/autoBackgroundScroll.js"></script>
<section id="game">
	<div id="cards">
		<div class="card">
			<div class="face front"></div>
			<div class="face back"></div>
		</div>
	</div>
</section>
<script type="text/javascript">
$(function(){
    $('body').autoBackgroundScroll({
		speed: 0.3,
		direction1: 'bottom',
		direction2: 'right',
		imageWidth: 324,
		imageHeight: 324
            });
})
$(function(){
	//实现随机洗牌
	pokes.matchingGame.deck.sort(shuffle);
	var $card = $(".card");
	for(var i = 0;i<23;i++)
	{
		$card.clone().appendTo($("#cards"));
	}
	//对每张牌进行设置
	$(".card").each(function(index) {
        //调整坐标
		$(this).css({
			"left":(pokes.matchingGame.cardWidth+20)*(index%8)+"px",
			"top":(pokes.matchingGame.cardHeight+20)*Math.floor(index/8)+"px"});
			//吐出一个牌号
			var pattern = pokes.matchingGame.deck.pop();
			//暂存牌号
			$(this).data("pattern",pattern);
			//把其翻牌后的对应牌面附加上去
			$(this).find(".back").addClass(pattern);
			//点击牌的功能函数挂接
			$(this).click(selectCard);
			});
    });
	</script>   
<div style="text-align:center; font-size:20px; font-weight:800; color:#C33;">
</div>
</body>
</html>